<!DOCTYPE html>
<html>
<head>
    <title>Paper.js 绘制文字示例</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.15/paper-full.min.js"></script>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" resize="true"></canvas>
    <script>
        // 初始化 Paper.js 项目
        paper.install(window);
        paper.setup('myCanvas');
 
        // 创建一个新的路径对象
        var textPath = new PointText({
            point: [50, 50],
            content: 'Hello, Paper.js!',
            fillColor: 'black',
            fontSize: 20
        });
 
        // 将文字路径转换为轮廓
        // var textOutline = textPath.createOutline();
 
        // 绘制文字轮廓
        var path = new Path({
            strokeColor: 'red',
            strokeWidth: 2
        });
        path.add(textPath);
 
        // 将项目导出为 SVG 字符串
        var svg = project.exportSVG({ asString: true });
        console.log(svg);

        setTimeout(()=>{
            textPath.position=new Point(100, 100);
        },1000*4)
    </script>
</body>
</html>